/* component */
import {
  RoleViewLeftPanel,
  RoleViewRightPanel,
} from '@src/modules/account/roleModule/component';
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum';
/* store */
import {
  useStoreCurrentSelectRole,
  useStoreInitData,
  useStoreFetchAuthGroups,
  useStoreAuthGroups,
  useStoreFetchRoleTree,
  useStoreRoleCurrentProduct,
} from '@src/modules/account/roleModule/store/hooks';
/* scss */
import '@src/modules/account/roleModule/index.scss';
/* vue */
import {
  ComponentInstance,
  computed,
  defineComponent,
  onBeforeMount,
  ref,
  watch,
  provide,
} from 'vue';
import Vue, { VNode } from 'vue';
/* util */
import { getRootWindow } from '@src/util/dom';
/* vuex */
import store from '@src/modules/account/roleModule/store';
import { Store } from 'vuex';
import StoreStateType from '@src/modules/account/roleModule/store/model';
/* enum */
import { RootPrefixVuexPropertyEnum } from '@src/modules/account/roleModule/model/enum/VuexPropertyEnum';
import {t} from '@src/locales'

export type RoleManagementViewProps = {
  providerId: String;
};

export interface RoleManagementViewSetupState {
  ProviderId: 'providerId';
}

export enum RoleManagementViewEventEnum {
  Input = 'input',
}

export type RoleManagementViewEmitsOptions = {
  input: () => void;
};

export type RoleManagementViewInstance = ComponentInstance &
  RoleManagementViewSetupState;
export type RoleManagementViewVM = RoleManagementViewSetupState &
  RoleManagementViewProps &
  ComponentInstance;

export function useStore<StoreType extends StoreStateType>(): Store<StoreType> {
  return store as Store<StoreType>;
}

import NoDataView from '@src/component/common/NoDataView';
const DataView = defineComponent(NoDataView);

/* api */
import { getServiceEngineerInit } from '@src/api/serviceProviderApi';
import { getRootWindowInitData } from '@src/util/window';
import { useProductLine } from '@shb-lib/tenant';

export default defineComponent({
  name: ComponentNameEnum.RoleManagementView,
  emits: [RoleManagementViewEventEnum.Input],
  props: ['providerId'],
  setup(props: RoleManagementViewProps, { slots, emit, attrs }) {
    const store: Store<StoreStateType> = useStore();
    store.commit(
      RootPrefixVuexPropertyEnum.SetProviderId,
      props.providerId || ''
    );

    const { initData } = useStoreInitData();
    
    const { currentProduct, setCurrentProduct } = useStoreRoleCurrentProduct()
    const { currentProductLine } = useProductLine()
    
    const fetchRoleTree = useStoreFetchRoleTree(true);
    const fetchAuthGroups = useStoreFetchAuthGroups();
    
    const { currentSelectRole } = useStoreCurrentSelectRole();

    const { authGroups } = useStoreAuthGroups();

    const rootWindow = getRootWindow(window);
    const rootInstance =
      (rootWindow?.getGlobalRootInstance &&
        rootWindow?.getGlobalRootInstance()) ||
      {};

    const isShowTrail = computed(() => {
      return rootInstance.isShowTrail;
    });

    const classNames = computed(() => {
      return [
        ComponentNameEnum.RoleManagementView,
        isShowTrail.value ? 'role-management-view-trail' : '',
      ];
    });

    watch(currentSelectRole, () => {
      fetchAuthGroups();
    });

    let RoleTree = ref({
      success: true,
      message: t('common.base.tip.noData'),
    });
    onBeforeMount(() => {
      // 设置当前产品线
      setCurrentProduct(currentProductLine.value)
      
      // 默认选择服务商主管

      fetchRoleTree().then(res => {
        RoleTree.value = res;
      });
    });

    // 获取权限
    const isProviderUser = computed(() => {
      return getRootWindowInitData()?.isProviderUser || false;
    });
    getServiceEngineerInit({ isProviderUser: isProviderUser.value }).then(res => {
      store.commit(
        RootPrefixVuexPropertyEnum.SetButtonList,
        res?.result?.buttonList || []
      );
    });

    return {
      initData,
      RoleTree,
      authGroups,
      classNames,
    };
  },
  render() {
    return (
      <div style="display:flex;transform: rotate(0);" class={this.classNames}>
        {this.RoleTree.success ? (
          (() => {
            return (
              <div style="display:flex;width:100%">
                <RoleViewLeftPanel />

                <RoleViewRightPanel />
              </div>
            );
          })()
        ) : (
          <DataView noticeMsg={this.RoleTree.message} />
        )}
      </div>
    ) as any;
  },
});
